<template>
	<view>
		<view class="inputs flex">
			<image src="/static/search_b.png" mode=""></image>
			<input
				v-model="data.queryParams.keyword"
				placeholder-class="input_class"
				auto-focus="true"
				type="text"
				placeholder="输入活动名称名称"
				confirm-type="search"
				@confirm="handleSearch"
			/>
			<view v-if="data.queryParams.keyword" class="flex_jc_cent" style="width: 50rpx" @click="clearInput">
				<uni-icons type="close" size="22"></uni-icons>
			</view>
		</view>
		<view class="kong" v-if="data.queryParams.keyword && data.list.length == 0 && data.isshow">
			<image src="/static/k.png" mode=""></image>
			<view class="text">
				没有找到你搜索的内容
				<view class="">换个关键词试试~</view>
			</view>
		</view>
		<loadstatusVue v-if="data.list.length != 0" :status="data.loadStatus">
			<view class="right_item" v-for="(item, index) in data.list" :key="index" @click="$pageGo(`/pages/activity/info?id=${item.id}`)">
				<view class="right_item_block">
					<view class="img">
						<image :src="item.imgFace" mode="aspectFill" :lazy-load="true"></image>
						<view class="adsimg" v-if="item.end == 0 && item.signUserList.length == item.maxCount">人员已满</view>
						<view class="adsimg" v-if="item.end == 1">活动结束</view>
					</view>
					<view class="right_cont">
						<view class="">
							<view class="title">{{ item.name }}</view>
							<view class="tip flex">
								<view class="t1">{{ item.type }}</view>
								<view class="t2" v-if="item.sign == '1'">签到</view>
								<view class="t2">{{ item.lineType == 1 ? '线上' : '线下' }}</view>
							</view>
						</view>
						<view class="">
							<view class="user flex">
								<image v-if="item.createUser.img" :src="item.createUser.img" mode="aspectFill"></image>
								<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
								<view class="">{{ item.createUser.name }}</view>
							</view>
							<view class="tips flex">
								<image src="/static/a1.png" mode=""></image>
								<view class="">{{ $formatDateTime(item.beginTime) }}</view>
							</view>
							<view class="tips flex" v-if="item.lineType == 1">
								<image src="/static/a3.png" mode=""></image>
								<view class="">{{ item.platform }}</view>
							</view>
							<view class="tips flex" v-else>
								<image src="/static/a2.png" mode=""></image>
								<view class="ts">{{ item.addressInfo }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom flex_jc_sb" v-if="item.signUserList">
					<view class="text_flex" v-if="item.signUserList.length != 0">
						<view class="avatar-stack">
							<view v-for="(its, ind) in item.signUserList.slice(0, 3)" :key="ind" class="avatar-item" :style="{ left: `${ind * 20}rpx` }">
								<image v-if="its.img" :src="its.img" mode="aspectFill" class=""></image>
								<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="tests">{{ item.signUserList.length }}/{{ item.maxCount }} 人报名</view>
					</view>
					<view class="" v-else></view>
					<view class="btn b1" v-if="item.end == 1">已结束</view>
					<view class="" v-else>
						<view class="btn" v-if="!item.activitySign">去报名</view>
						<view class="btn" v-if="item.activitySign && item.activitySign.supplement == '0'">已报名</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { homeSearch } from '@/api/index.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	isshow: false,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		keyword: '',
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			data.isshow = true;
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};

// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await homeSearch(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const handleSearch = (e) => {
	if (data.queryParams.keyword == '') {
		uni.showToast({ title: '请输入搜索内容', icon: 'none' });
		return;
	}
	data.queryParams.pageNum = 1;
	getList();
};
// 清空输入框的方法
const clearInput = () => {
	data.queryParams.keyword = '';
	data.isshow = false;
	data.queryParams.pageNum = 1;
	getList();
};
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.kong {
	width: 360rpx;
	margin: 260rpx auto;
	image {
		width: 360rpx;
		height: 236rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.input_class {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #cacaca;
}
.inputs {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 40rpx;
	margin: 20rpx auto;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	image {
		width: 32rpx;
		height: 32rpx;
	}
	input {
		flex: 1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000;
		padding-left: 15rpx;
	}
}

.right_item {
	width: 710rpx;
	height: 280rpx;
	background: #ffffff;
	margin: 0rpx auto 20rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	.right_item_block {
		display: flex;
		flex: 1;
		.img {
			display: block;
			width: 140rpx;
			height: 190rpx;
			border-radius: 8rpx;
			position: relative;
			image {
				width: 140rpx;
				height: 190rpx;
				border-radius: 8rpx;
			}
		}
		.adsimg {
			position: absolute;
			top: 0%;
			width: 140rpx;
			height: 190rpx;
			border-radius: 8rpx;
			background: rgba(0, 0, 0, 0.3);
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			text-align: center;
			line-height: 190rpx;
		}
		.right_cont {
			flex: 1;
			margin-left: 12rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			justify-content: space-between;
			width: 0;
			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.tip {
				margin: 10rpx 0rpx 0rpx 0rpx;
				.t1 {
					padding: 0rpx 6rpx;
					height: 32rpx;
					background: #b19561;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #ffffff;
					line-height: 32rpx;
					margin-right: 10rpx;
				}
				.t2 {
					padding: 0rpx 6rpx;
					height: 28rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #615b56;
					line-height: 28rpx;
					border: 1px solid #615b56;
					margin-right: 10rpx;
				}
			}
			.user {
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					border-radius: 12rpx;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #8f8f8b;
			}
			.tips {
				margin-top: 6rpx;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
					border-radius: 12rpx;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #8f8f8b;
				.ts {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.bottom {
		margin-top: 12rpx;
		.btn {
			width: 128rpx;
			height: 40rpx;
			background: #e3d0ad;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			line-height: 40rpx;
			text-align: center;
		}
		.b1 {
			background: #f9f9f9;
			color: #d1cdcd;
		}
	}
	.text_flex {
		display: flex;
		align-items: center;
		.tests {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #8f8f8b;
			margin-left: 8rpx;
		}
	}
	.avatar-stack {
		width: 70rpx;
		position: relative;
		display: inline-block;
		padding-right: 12rpx; /* 预留右侧空间 */
		height: 40rpx; /* 头像高度 */
	}
	.avatar-item {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%; /* 圆形头像 */
		transition: transform 0.2s;
		top: 5rpx;
		image {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%; /* 圆形头像 */
			border: 1px solid #fff;
		}
	}
}
</style>
